.chat-content-warp {
  box-sizing: border-box;
  padding: 0 12px;
  overflow: hidden;
  height: 100%;
  


  .chat-object {
    width: 100%;
    padding: 10px 0;

    .chat-object-picture {
      display: inline-block;
      width: 41px;
      height: 41px;
      margin-right: 2px;
      padding: 0;
      position: relative;
      overflow: hidden;
      vertical-align: top;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;

      img {
        margin: 0;
        width: 100%;
        height: 100%;
        position: absolute;
      }
    }

    .chat-object-text {
      display: inline-block;
      max-width: 66%;
      vertical-align: top;

      .chat-object-name {
        display: block;
        width: 100%;
        margin-bottom: 5px;
        font-size: 12px;
      }

      .chat-object-content {
        display: block;
        width: 100%;
        padding: 7px 14px;
        box-sizing: border-box;
        font-size: $font-size-14;
        font-family:$font-family;
        letter-spacing: 0;
        line-height: 28px;
        font-weight:$font-weight-600;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        background: $color-fff;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;

        @include themify() {
          color: themed('default-font-color');
        }

        
      }

      .chat-object-ontactOP-box {
        width: 100%;
        max-width: 244px;
        padding-top: 140px;
        padding-bottom: 40px;
        display: block;
        position: relative;
        overflow: hidden;
        line-height: 15px;
        font-size: $font-size-11;
        font-weight: $font-weight-600;
        font-family: $font-family;
        
        .chat-object-ontactOP {
          width: 100%;
          height: 139px;
          display: block;
          position: absolute;
          top: 0;
          left: 0;

        }

        .chat-object-ontactOP-btn {
          display: inline-block;
          padding: 0 26px;
          min-height: 30px;
          box-sizing: border-box;
          color: $color-fff;
          background-color: #f0690b;
          position: absolute;
          right: 10px;
          bottom: 5px;
          border-radius: 15px;
          -webkit-border-radius: 15px;
          -moz-border-radius: 15px;
          -ms-border-radius: 15px;
          -o-border-radius: 15px;
        }

        @media (max-width: 375px) {
          padding-top: 139px;
          .chat-object-ontactOP {
            width: 100%;
            height: 132px;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
  
          }
        }

        @media (max-width: 360px) {
          padding-top: 133px;
          .chat-object-ontactOP {
            width: 100%;
            height: 126px;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
  
          }
        }

        @media (max-width: 320px) {
          padding-top: 118.5px;
          line-height: 18px;
          .chat-object-ontactOP {
            width: 100%;
            height: 111.5px;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
  
          }
        }
      }
    }
  }


  .chat-self {
    display: flex;
    width: 100%;
    padding: 10px 0;
    position: relative;

    .chat-self-box {
      justify-content: flex-end;
      width: 100%;
      text-align: right;
    }

    .chat-self-picture {
      display: block;
      width: 41px;
      height: 41px;
      padding: 0;
      overflow: hidden;
      position: absolute;
      top: 13px;
      right: 0;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;

      @media (max-width: 1920px) {
        top: 10.5px;
      }

      img {
        margin: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        right: 0;
      }
    }

    .chat-self-text {
      display: inline-block;
      width: 83.55%;
      text-align: right;
      margin-right: 54px;

      .chat-self-sate {
        display: inline-block;
        width: 28px;
        vertical-align: top;
      }

      .chat-self-content {
        display: inline-block;
        vertical-align: top;
        max-width: 79%;
        padding: 7px 14px;
        box-sizing: border-box;
        font-size: $font-size-14;
        font-family:$font-family;
        letter-spacing: 0;
        line-height: 28px;
        font-weight:$font-weight-600;
        text-align: left;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;

        @include themify() {
          background: themed('chat-send-color');
          color: themed('seft-bubble-font-color');
        }


        img {
          vertical-align: middle
        }
      }

      .chat-self-ontactOP-box {
        width: 79%;
        max-width: 244px;
        padding-top: 140px;
        padding-bottom: 10px;
        display: inline-block;
        position: relative;
        overflow: hidden;
        letter-spacing: 0;
        line-height: 15px;
        font-size: $font-size-11;
        font-weight: $font-weight-600;
        font-family: $font-family;
        
        .chat-self-ontactOP {
          width: 100%;
          height: 139px;
          display: block;
          overflow: hidden;
          position: absolute;
          top: 0;
          left: 0;

        }

        @media (max-width: 375px) {
          padding-top: 139px;
          .chat-self-ontactOP {
            width: 100%;
            height: 132px;
  
          }
        }

        @media (max-width: 360px) {
          padding-top: 133px;
          .chat-self-ontactOP {
            width: 100%;
            height: 126px;
  
          }
        }

        @media (max-width: 320px) {
          padding-top: 118.5px;
          line-height: 18px;
          .chat-self-ontactOP {
            width: 100%;
            height: 111.5px;
  
          }
        }
      }
    }

    

  }

  .chat-date {
    display: block;
    text-align: center;

    .chat-time {
      display: inline-block;
      margin: 10px auto;
      text-align: center;
      padding: 6px 9px 5px 10px;
      background-color: $color-000000a;
      color: $color-fefefe;
      font-size: 12px;
      border-radius: 39px;
      -webkit-border-radius: 39px;
      -moz-border-radius: 39px;
      -ms-border-radius: 39px;
      -o-border-radius: 39px;
    }
  }
}
